<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import ConfirmModal from "@/components/ConfirmModal.vue";
import { giftCancelOrderApi, giftConfirmOrderApi } from "@/api/index.js";
import {message} from "ant-design-vue";

const props = defineProps(['order'])
const emit = defineEmits(["actionSuccess"]);
const router = useRouter();
const status = computed(() => {
  let label = ''
  switch (props.order.status) {
    case -1:
      label = '已取消'
      break
    case 0:
      label = '未支付'
      break
    case 1:
      label = '已支付'
      break
    case 3:
      label = '待发货'
      break
    case 4:
      label = '已发货'
      break
    case 5:
      label = '已收货'
      break
    case 6:
      label = '已完成'
      break
    default:
      label = undefined
  }
  return label
})
const confirmRef = ref()
const modalTips = ref('')
// 操作类型 1：取消订单；2：确认订单；
const actionsType = ref()
// 显示提示弹窗
const showConfirmModal = (type) => {
  if (type === 1) modalTips.value = '是否取消该订单？'
  else if (type === 2) modalTips.value = '是否删除该订单？'
  else modalTips.value = '您已收到该订单商品？'
  actionsType.value = type
  confirmRef.value.open()
}
// 操作
const actions = () => {
  if (actionsType.value === 1) cancelOrder()
  else confirmOrder()
}
// 取消订单
const cancelOrder = () => {
  giftCancelOrderApi({order_id: props.order.id, order_cancel_cause: ''}).then((res) => {
    emit('actionSuccess')
    message.success('操作成功')
    confirmRef.value.close()
  }).catch((err) => message.error(err.msg))
}
// 订单确认收货
const confirmOrder = () => {
  giftConfirmOrderApi({order_id: props.order.id}).then((res) => {
    emit('actionSuccess')
    message.success('操作成功')
    confirmRef.value.close()
  }).catch((err) => message.error(err.msg))
}
const nav = (name) => {
  router.push({name, query: {id: props.order.id}})
}
</script>

<template>
  <a-card>
    <template #title> <div class="time"> {{ order?.create_time }} </div> </template>
    <template #extra> <a-tag color="pink" :bordered="false"> {{ status }} </a-tag> </template>
    <div class="order-item">
      <div class="good-list" >
        <div class="goods-item" v-for="(goods, gIndex) in order.item" :key="goods.sku">
          <div class="box">
            <img :src="goods?.thumb" alt="" class="goods-img"/>
            <div class="goods-info">
              <div class="goods-name"> {{ goods.goods_name }} </div>
              <div class="goods-spec ellipsis"> 规格： {{ goods?.spece_value_title?goods?.spece_value_title:'默认规格' }} </div>
            </div>
          </div>
          <div class="box mt">
            <div class="goods-price">
              <div class="new-price">  {{ goods.amount }} </div>
            </div>
            <div class="num"> x{{ goods?.num }} </div>
          </div>
        </div>
      </div>
    </div>
    <template #actions>
      <a-button size="small" @click="nav('giftOrderDetail')"> 订单详情 </a-button>
      <a-button size="small" v-if="order.status === 0" @click="showConfirmModal(1)"> 取消订单 </a-button>
      <a-button size="small" v-if="order.status === 4" @click="nav('giftViewExpress')"> 查看物流 </a-button>
      <a-button size="small" v-if="order.status === 4" @click="showConfirmModal(2)"> 确认收货 </a-button>
    </template>
  </a-card>
  <ConfirmModal ref="confirmRef" title="提示" :tips="modalTips" @confirm="actions"/>
</template>

<style scoped lang="scss">
:deep(.ant-card-head) {
  height: 40px;
  min-height: 40px;
  border-color: #f8f8f8;
  .time {
    color: #999;
    font-size: 14px;
    font-weight: normal;
  }
}
:deep(.ant-card-body) {
  padding: 10px !important;
}
.order-item {
  .good-list {
    gap: 10px;
    display: flex;
    flex-direction: column;
    .goods-item {
      gap: 20px;
      display: flex;
      align-items: start;
      padding: 10px;
      border-radius: 10px;
      background-color: #f8f8f8;
      .box {
        display: flex;
        align-items: start;
        gap: 20px;
      }
      .goods-img {
        width: 100px;
        height: 130px;
        border-radius: 10px;
      }
      .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 5px;
        .ellipsis {
          max-width: 470px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .goods-name {
          max-width: 470px;
          font-size: 16px;
          font-weight: bold;
        }
        .goods-spec, .shop-name {
          color: #999;
        }
        .actions {
          margin-top: 10px;
          .refund {
            color: #999;
            cursor: pointer;
            &:hover {
              color: var(--primary);
            }
          }
        }
      }
      :deep(.ant-input-number) {
        width: 40px;
      }
      :deep(.ant-input-number-group-addon) {
        background-color: transparent;
        border: none;
        padding: 0;
      }
      :deep(.ant-input-number-input) {
        text-align: center !important;
      }
      .ant-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        color: #999;
        border: none;
        border-radius: 10px;
        background-color: #f1f1f5;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
          background-color: #e8e8f0;
        }
        .anticon {
          color: #242424;
          font-size: 16px;
        }
      }
      .goods-price {
        color: #999;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 10px;
        .new-price, .old-price {
          white-space: nowrap;
        }
        .new-price {
          color: #f44;
          font-size: 18px;
        }
        .old-price {
          text-decoration: line-through;
        }
      }
    }

    @media (max-width: 750px) {
      .goods-item {
        display: block;
      }
      .mt {
        margin-top: 20px;
        justify-content: space-between;
      }
      .goods-name, .ellipsis {
        max-width: 100%;
      }
    }
  }
}
:deep(.ant-card-actions>li) {
  width: auto !important;
  margin: 5px 0;
}
:deep(.ant-card-actions) {
  border-color: #f8f8f8;
  display: flex;
  justify-content: end;
  gap: 10px;
  .ant-btn {
    color: #999;
    border-color: #333;
    border-radius: 20px;
  }
}
</style>